import React, { useState } from 'react';
import { history } from 'umi';
import { createForm } from 'rc-form';
import { List, InputItem, Toast, Icon } from 'antd-mobile';
import SelfHead from 'components/common/selfHead';
import EYE from 'static/icon_eye.png';
import EYELASH from 'static/icon_eyelash.png';
import { login } from 'ser/actions';

import './index.less';

function Login(props) {
  const { form } = props;
  const { getFieldProps, validateFields, getFieldError } = form;
  const [flag, setFlag] = useState(false);
  function handleClick() {
    validateFields()
      .then(async value => {
        const { username, password } = value;
        if (username === '' && password === '') {
          Toast.info('请填写登录信息', 1);
          return;
        }
        const res = await login({ username, password });
        const { code, token, msg, companyType, isComplete, user } = res;
        if (code === 200) {
          Toast.info(msg, 1);
          sessionStorage.setItem('token', token);
          sessionStorage.setItem('companyType', companyType);
          sessionStorage.setItem('isComplete', isComplete);
          sessionStorage.setItem('user', JSON.stringify(user));
          history.push('/');
        }
      })
      .catch(error => {
        console.log(error);
      });
  }
  function goSignup() {
    history.replace('/signup');
  }
  const validateUsername = (rule, val, callback) => {
    let value = val.replace(/ /g, '');
    if (value && value.length >= 4) {
      callback();
    } else if (value.length === 0) {
      callback(new Error('账号不能为空'));
    } else {
      callback(new Error('账号填写不正确'));
    }
  };
  const validatePassword = (rule, val, callback) => {
    let value = val.replace(/ /g, '');
    if (value && value.length >= 1) {
      callback();
    } else if (value.length === 0) {
      callback(new Error('密码不能为空'));
    } else {
      callback(new Error('密码填写不正确'));
    }
  };
  return (
    <div className="login">
      <SelfHead
        title="登录"
        rightContent={<span onClick={goSignup}>注册</span>}
      />
      <div className="login-form">
        <List className="self-list">
          <InputItem
            {...getFieldProps('username', {
              rules: [{ validator: validateUsername }],
            })}
            error={!!getFieldError('username')}
            onErrorClick={() => {
              Toast.info(getFieldError('username'), 1);
            }}
            clear
            placeholder="请输入用户名"
          ></InputItem>
          <InputItem
            {...getFieldProps('password', {
              rules: [{ validator: validatePassword }],
            })}
            error={!!getFieldError('password')}
            onErrorClick={() => {
              Toast.info(getFieldError('password'), 1);
            }}
            clear
            type={flag ? 'text' : 'password'}
            extra={<img src={flag ? EYELASH : EYE} className="eye" />}
            onExtraClick={() => setFlag(!flag)}
            placeholder="请输入密码"
          ></InputItem>
        </List>
        <div className="login-btn" onClick={handleClick}>
          登录
        </div>
      </div>
    </div>
  );
}
export default createForm()(Login);
